<template>
  <div class="add-terminal-dialog-view">

    <el-dialog
      v-model="dialogVisible"
      title="添加终端"
      width="1000px"
      :before-close="handleClose"
    >

      <el-form
        :inline="true"
        :model="screendData"
        label-position="right"
        size="small"
      >

        <el-form-item label="产品名称">
          <el-input
            v-model="datas.productPopularName"
            disabled
          />
        </el-form-item>

        <el-form-item label="终端地区">
          <el-cascader
            ref="cascader"
            v-model="screendData.areas"
            :popper-append-to-body="false"
            :options="area"
            :props="props1"
            placeholder="请选择地区"
            collapse-tags
            clearable
            @change="areaChange"
          />
        </el-form-item>

        <!--                <el-form-item label="终端名称">-->
        <!--                    <el-input v-model="screendData.terminalName" placeholder="请输入终端名称"></el-input>-->
        <!--                </el-form-item>-->

        <el-form-item
          v-if="datas.agentId"
          label="可营销终端"
        >
          <el-select
            v-model="screendData.terminalType"
            placeholder="请选择营销终端"
            :disabled="datas.terminalType != 'all'"
          >
            <el-option
              v-for="item in appOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="small"
            plain
            @click="getListData"
          >查询</el-button>
        </el-form-item>

      </el-form>

      <el-table
        max-height="350"
        border
        header-cell-class-name="table-header"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectable"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="终端编号"
          prop="terminalNo"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          header-align="center"
          align="left"
          label="终端名称"
          prop="terminalName"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          header-align="center"
          align="center"
          label="所在地区"
          width="100"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <span>{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="产品通用名"
          prop="productInfoDetail.productPopularName"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          header-align="center"
          align="center"
          label="终端价(元)"
          width="100"
        >
          <template #default="scope">
            ¥{{ scope.row.terminalPrice }}
          </template>
        </el-table-column>

        <el-table-column
          header-align="center"
          align="center"
          label="当前交易价(元)"
          width="100"
        >
          <template #default="scope">
            ¥{{ scope.row.tradePrice }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="当前招商要素编号"
          width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-if="scope.row.productPriceStrategyDetail">{{ scope.row.productPriceStrategyDetail.priceNumber }}</span>
          </template>
        </el-table-column>

      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="dialogConfirm"
          >添加至列表</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {crmStore} from '@CRM/store'
// import area from '@/utils/area.js'
import {defineComponent, getCurrentInstance, inject, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'AddTerminalDialog',
  props: {
    datas: {
      type: Object,
      default: {},
    },
    area: {
      type: Array,
      default: [],
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const props1 = reactive({
      multiple: true,
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })
    const appOptions = crmStore.getters['dictionary/getDictionary']['app_mode']
    const api = inject('api')
    const citys = ref([])
    var cascader = ref(null)

    var data = reactive({
      dialogVisible: false,
      tableData: [],
      screendData: {
        areas: [],
        terminalName: '',
        terminalType: '',
      },
      region: [],
      selects: [],
    })

    const getListData = () => {
      const a = {
        productId: props.datas.productId,
        agentProductId: props.datas.agentProductId,
        region: data.region,
        terminalType: data.screendData.terminalType,
        agentId: props.datas.oldAgentId,
      }
      api.signedAgent.RELATIONSTANDARD_CHANGE_AGENT_LIST_BYID(a).then((res) => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
        }
      })
    }

    const handleSelectionChange = (val) => {
      data.selects = val
    }

    const handleClose = () => {
      data.dialogVisible = false
    }

    const dialogConfirm = () => {
      if (!data.selects.length) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择终端',
        })

        return
      }

      const a = JSON.parse(JSON.stringify(data.selects))
      emit('confirm', a)

      data.dialogVisible = false
      setTimeout(() => {
        data.selects = []
        data.tableData = []
      }, 100)
    }

    const openDialog = () => {
      data.region = props.datas.region
      data.screendData.areas = currentInstance.proxy.getCascaderAreaData(
        props.datas.region
      )
      data.screendData.terminalType = props.datas.terminalType
      getListData()
      data.dialogVisible = true
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        cascader.value.getCheckedNodes()
      )
      data.region = serve
    }

    const selectable = (row) => {
      return !row.disable
    }

    return {
      ...toRefs(data),
      props1,
      citys,
      cascader,
      appOptions,

      handleClose,
      dialogConfirm,
      openDialog,
      handleSelectionChange,
      areaChange,
      selectable,
      getListData,
    }
  },
})
</script>

<style scoped>
</style>
